<template>
  <div class="w-full h-full flex items-center" :class="isRight ? 'justify-end' : 'justify-start'">
    <div v-if="!isRight" class="relative opacity-80" :style="{ height: size * 2 + 'vh', width: size * 2 + 'vh' }">
      <img :src="'/public/deco_' + deco + '.png'" class="objects-fill w-full h-full">
      <div class="absolute w-full h-full justify-center items-center flex top-0">
        <slot />
      </div>
    </div>

    <div :style="{ margin: size * 0.2 + 'vh ' + size * 0.2 + 'vh' }" :class="isRight ? 'text-end' : 'text-start'">
      <div class="w-full text-char-500" :style="{ fontSize: size * 0.4 + 'vh' }">{{ title }}</div>
      <div class="w-full font-bold text-char-300 flex">
        <div :style="{ fontSize: size + 'vh' }">{{ value }}</div>
        <div class="text-char-600 pl-2" :style="{ fontSize: size * 0.3 + 'vh', marginTop: size * 0.5 + 'vh' }">{{ tail }}</div>
      </div>
    </div>

    <div v-if="isRight" class="relative opacity-80" :style="{ height: size * 2 + 'vh', width: size * 2 + 'vh' }">
      <img :src="'/public/deco_' + deco + '.png'" class="objects-fill w-full h-full">
      <div class="absolute w-full h-full justify-center items-center flex top-0">
        <slot />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { NIcon } from 'naive-ui'
import { primary500 } from '../../shared/theme/color'

defineProps({
  isRight: {
    type: Boolean,
    required: false,
    default: false
  },

  deco: {
    type: Number,
    required: true
  },

  size: {
    type: Number,
    required: true
  },

  title: {
    type: String,
    required: true
  },

  value: {
    type: String,
    required: true
  },

  tail: {
    type: String,
    required:false,
    default: ''
  }
})

</script>

<style>
</style>
